<template>
  <div class="bute">
    <header>
      <div class="leftue">
        <p><i class="el-icon-s-fold"></i></p>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/about' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/bute">商品</a></el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <p>
        <i class="el-icon-search"></i>
        <i class="el-icon-full-screen"></i>
      </p>
    </header>
    <div class="byer">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/about' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/bute">商品管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="出售中商品（6）" name="first">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"  @click="kwywor"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="word" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button
                  @click.native.prevent="edit(scope.row, tableData)"
                  type="text"
                  size="small"
                >
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
          <!-- 分页 -->
        </el-tab-pane>
        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogForm">
          <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品售价" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销量" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="库存" :label-width="formLabelWidth">
              <el-input v-model="form.word" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="editLi()">确 定</el-button>
          </div>
        </el-dialog>
        <el-tab-pane label="仓库中商品（49）" name="second">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >加入回收站</el-button
                >
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已经售罄商品（24）" name="third">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >加入回收站</el-button
                >
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="商品回收站" name="fourth">
          <div class="input_ret">
            <div>
              <span>商品分类：</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <!-- 搜索 -->
              <p>商品搜索：</p>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              <el-button type="info" plain icon="el-icon-search"></el-button>
            </div>
          </div>
          <!-- 添加 -->
          <el-button type="primary">添加商品</el-button>
          <!-- 表格 -->
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column label="商品圈" width="100">
              <template slot-scope="scope">
                <img style="height: 50px" :src="scope.row.img" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品售价"
              width="80"
            ></el-table-column>
            <el-table-column prop="price" label="销量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="title" label="状态" width="100">
            </el-table-column>
            <el-table-column prop="tel" label="操作时间" width="180">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >恢复商品</el-button
                >

                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      options: [],
      value: "",
      input: "",
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 5, //每页数据

      dialogForm: false,
      form: {
        name: "",
        price: "",
        title:"",
        word:""
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },
  methods: {
    handleClick(tab, event) {
      // this.$router.push(`/chaxun${}`)
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //编辑
    edit(row) {
      this.dialogForm = true;
      Object.assign(this.form, { ...row });
    },
    editLi() {
      axios
        .put("http://127.0.0.1:7001/editList", { ...this.form })
        .then((res) => {
          this.dialogForm = false;
          this.$router.go(0);
        });
    },
    //搜索
     kwywor() {
      axios
        .get(`http://127.0.0.1:7001/getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bute {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: #fff;
  justify-content: space-between;
  padding: 0 20px;
  .leftue {
    display: flex;
  }
  i {
    font-size: 15px;
    padding: 0 10px;
  }
}
.byer {
  height: 40px;
  display: flex;
  align-items: center;
  background: #efefef;
  margin: 5px 0;
  span {
    padding: 10px 20px;
    background: #fff;
    margin: 0 5px;
  }
}
main {
  flex: 1;
  background: #fff;
  padding: 0 10px;
}
.input_ret {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.input {
  width: 50%;
  display: flex;
  align-items: center;
  p {
    width: 100px;
  }
}
.el-button {
  margin: 5px 0;
}
.el-pagination {
  text-align: right;
  padding: 20px;
}
span {
  padding: 0 20px;
}
</style>